<template>
	<view class="airdetails">
		 <u-navbar :placeholder="true" :title="title" :autoBack="true" :safeAreaInsetTop="true">
			<view
			    class="u-nav-slot"
			    slot="left"
			    >
				
				</view>
		 </u-navbar>
	     <view class="airdetails-heard"></view>
	     <scroll-view  scroll-y="true" @scrolltolower="scrolltolower" style="height: calc(100vh - 239rpx);">
			 <view class="airdetails-list">
			 	<view class="airdetails-list-item" v-for="(l,i) in list">
			 		<view class="item-img">
			 			<image :src="l.thumb" mode="widthFix"></image>
			 		</view>
					<view class="item-banben">
						<view class="item-banben-text">
							<text>#{{l.goods_code+'/'+l.goods_count}}</text>
							<text>{{l.title}}</text>
						</view>
						<!-- <view class="item-banben-dj">
							<text>SSR</text>
						</view> -->
						
					</view>
			 	</view>
				
				
			 </view>
	         <view class="load" > <!--做滚动加载提示使用, more:上拉加载更多 loading:加载中 noMore:没有更多数据-->
	           <uni-load-more :status="status"></uni-load-more>
	         </view>
		 </scroll-view>
		 <view class="airdetails-btn">
		 	<view class="allopen" @click="goPurchase">
		 		<text>继续购买</text>
		 	</view>
		 	<view class="Consignment" @click="myCollection">
		 		<text>我的藏品</text>
		 	</view>
		 </view>
		 <view class="" style="height: 180rpx;"></view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				title:'汤恩伯盲盒名称',
				parmes:{
					page:1,
					page_size:10,
					blind_box_id:null
				},
				list:[],
				total:0,
				status:'noMore'
			}
			
		},
		onLoad(v){
			this.parmes.blind_box_id = v.id
			this.boxList()
		},
		onPullDownRefresh(){
			this.parmes.page = 1
			this.boxList()
		},
		methods:{
			scrolltolower(){
				if(this.status==='noMore') return
				this.parmes.page +=1
				this.boxList()
			},
		async boxList(){
			    this.status = 'loading'
				let res = await this.$http({
					  url:this.$api.myBlindBoxResult,
					  method:'get',
					  hideLoading: true,
				      data:this.parmes
				})
				
				
				if(this.parmes.page===1){
					this.list = []
				}
				if(res.code===200){
					res.data.data.forEach(item=>{
						this.list.push(item)
						
					})
					this.total = res.data.total
					if(this.total===res.data.data.length){
						this.status  = 'noMore'
					}else{
						this.status = 'more'
					}
				}else{
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: 'none'
					});
				}
				
			},
			goPurchase(){
				uni.switchTab({
					url:'/pages/BlindBox/BlindBox'
				})
			},
			myCollection(){
				uni.switchTab({
					url:'/pages/Mine/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.load{
		margin: auto;
	}
	.airdetails{
		width: 100vw;
		height: 100vh;
		overflow-y: auto;
		background: linear-gradient(137deg, #F6F9FF 0%, #F6F9FF 100%);
	    &-heard{
			position: absolute;
			width: 100vw;
			height: 363rpx;
			background-image: url(@/static/images/info/bianzuthree.png);
		    background-size: 100% 100%;
		}
		&-list{
			margin-top: 40rpx;
			display: flex;
			flex-wrap: wrap;
			&-item{
				margin-bottom: 20rpx;
				width: calc(50vw - 40rpx - 20rpx);
				// height: 200px;
				background-color: #fff;
				margin-left: 40rpx;
				.item-img{
					width: calc(100% - 40rpx);
					margin: auto;
					margin-top: 20rpx;
					image{
						width: 100%;
					}
				}
				.item-banben{
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					margin-left: 20rpx;
					.item-banben-text{
						display: flex;
						flex-direction: column;
						text:nth-child(1){
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #8C93AA;
						}
						text:nth-child(2){
							font-size: 24rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #16172F;
							
						}
					}
					.item-banben-dj{
						width: 78rpx;
						height: 40rpx;
						background: #292A40;
						border-radius: 1px 20rpx 1px 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						text{
							font-size: 24rpx;
							font-family: Arial-Black, Arial;
							font-weight: 900;
							color: #FFFFFF;
							
						}
					}
				}
			}
		}
		&-btn{
			width: 100vw;
			height: 160rpx;
			background: #FFFFFF;
			backdrop-filter: blur(0px);
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			.allopen{
				margin-left: 40rpx;
				width: calc(50vw - 40rpx - 20rpx);
				height: 88rpx;
				background: #FFFFFF;
				border-radius: 44rpx;
				border: 1px solid #979797;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #16172F;
				text-align: center;
				line-height: 88rpx;
			}
			.Consignment{
				margin-left: 30rpx;
				width: calc(50vw - 40rpx - 20rpx);
				height: 88rpx;
				background: #FFFFFF;
				border-radius: 44rpx;
				border: 1px solid #979797;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #16172F;
				text-align: center;
				line-height: 88rpx;
			}
		}
	
	}
</style>